 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>发现</title>

<link rel="stylesheet" href="morego/../../layui.css">
  <style>

    #recomFace {
      padding: 20px;
      padding-right: 0px
    }

    #recomFace li {
      float: left;
      padding: 0 10px 10px 0;
      width: 80px;
      height: 80px;
      cursor: pointer;
    }
    #recomFace li img {
      padding:5px;
      width: 80px;
      height: 80px;
    }
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
      zoom: 1;
    }
    .clearfix li {
      list-style: none;
      list-style-position: outside;
      list-style-type: none;
    }

  </style>
</head>
<body>



<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">找人</li>
        <li>找群</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-flow-more"><li class="layim-msgbox-tips">推荐用户</li></div>
            <div>
                <ul class="clearfix" id="recomFace"  >

                </ul>
            </div>

        </div>
        <div class="layui-tab-item">



                <table class="layui-table"  lay-even lay-skin="nob">
                    <colgroup>
                        <col width="80">
                        <col width="300">
                        <col>
                    </colgroup>

                    <tr>
                        <td>群名称:</td>
                        <td><input type="text" id="search_group_name" name="title" required  placeholder="" autocomplete="off" class="layui-input"> </td>
                        <td><button class="layui-btn" lay-submit lay-filter="formDemo" id="search_btn">搜索</button></td>
                    </tr>
                </table>
                <table class="layui-table" lay-even="" lay-skin="nob">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                        <col>
                    </colgroup>

                    <tbody id="group_list">

                    </tbody>
                </table>


        </div>
    </div>
</div>


<script title="添加好友模版" id="show_tpl" style="display:none;" type="text/plain">
{{# layui.each(d.data, function(index, item){
  if(item.id){ }}
    <li data="{{ item.id }}" nick="{{ item.username }}" avatar="{{ item.avatar }}"  data-type="reqAddFriend">
             <img src="{{ item.avatar }}" alt=""><a href="">{{ item.username }}</a>
    </li>

  {{# } else { }}

  {{# }
}); }}
</script>


<script title="群组模版" id="group_tpl" style="display:none;" type="text/plain">

    {{# layui.each(d.data, function(index, item){
      if(item.id){ }}

        <tr data="{{ item.id }}" title="{{item.title}}" pic="{{item.pic}}"  data-type="addGroup">
            <td><img src="{{ item.pic }}"  style="width: 60px;" alt=""></td>
            <td>{{item.title}}</td>
            <td>{{item.remark}}</td>
            <td id="group_td_{{item.id}}"><button class="layui-btn layui-btn-primary layui-btn-small" onclick="addGroup({{item.id}})">+添加</button></td>
        </tr>

      {{# } else { }}

      {{# }
    }); }}
</script>


<script src="/im/layui/layui.js"></script>


<script>



function addGroup( group_id ){
    layui.use([ 'layer' ], function(){

        var layim = layui.layim
                ,layer = layui.layer
                ,laytpl = layui.laytpl
                ,$ = layui.jquery
        $.getJSON('/add_group?sid='+parent.GlobalSid+"&name="+$('#search_group_name').val()+"&group_id="+ group_id,   function(res){

            if(res.code != 0){
                layer.msg(res.msg);
            }else{
                //layer.msg(res.msg);
                $('#group_td_'+ group_id).html('已添加')

                res.data.avatar = res.data.pic
                res.data.groupname = res.data.title
                parent.GlobalGroups[parent.GlobalGroups.length] = res.data
                //将好友追加到主面板
                parent.layui.layim.addList({
                    type: 'group'
                    ,avatar: res.data.pic //好友头像
                    ,username: res.data.title //好友昵称
                    ,groupid: res.data.id //所在的分组id
                    ,id: parent.GlobalId //
                    ,channel_id:res.data.channel_id
                    ,sign: res.data.remark  //好友签名
                });
            }

        });

    });
}
layui.use(['layim', 'laypage', 'flow','layer','form','element'], function(){
   var layim = layui.layim
    ,layer = layui.layer
    ,laytpl = layui.laytpl
    ,$ = layui.jquery
    ,flow = layui.flow
    ,laypage = layui.laypage;

    var element = layui.element();
    var form = layui.form();


    //请求消息
    var renderMsg = function(page, callback){

        $.getJSON('/get_recommend_user?sid='+parent.GlobalSid+"&page="+page,   function(res){
            if(res.code != 0){
                return layer.msg(res.msg);
            }
            callback && callback(res.data, res.pages);

            $("#recomFace li").click(function () {

                $('#recomFace li').each(function (i) {
                    $(this).css('background-color', '');
                });
                $(this).css('background-color', 'lightblue');
                //选择分组
                parent.layui.layim.setFriendGroup({
                    type: 'friend'
                    ,username: $(this).attr("nick")
                    ,avatar: $(this).attr("avatar")
                    ,group: parent.layui.layim.cache().friend //获取好友分组数据
                    ,submit: function(group, index){

                        $.getJSON('/req_add_friend?sid='+parent.GlobalSid+"&uid="+parent.GlobalId+"add_group="+$('#LAY_layimGroup').val(),   function(res){

                           // alert(res.msg);
                            if(res.code != 0){
                                layer.msg(res.msg);
                            }else{
                                layer.msg(res.msg);

                            }
                        });


                    }
                });

            });

        });

    };

    //请求消息
    var renderGroup = function(page, callback){

        $.getJSON('/search_group?sid='+parent.GlobalSid+"&page="+page+"&name="+$('#search_group_name').val(),   function(res){
            if(res.code != 0){
                return layer.msg(res.msg);
            }

            callback && callback(res.data, res.pages);

            $("#group_list tr").click(function () {

                $('#group_list tr').each(function (i) {
                    $(this).css('background-color', '');
                });
                $(this).css('background-color', 'lightblue');

            });

        });

    };
    $("#search_btn").click(function () {

        renderGroup(1, function(data, pages){
            var html = laytpl( $('#group_tpl').html() ).render({
                data: data
                ,page: 1
            });
            $('#group_list').html( html );
        });

    });


    //消息信息流
    flow.load({
        elem: '#recomFace' //流加载容器
        ,isAuto: false
        ,end: ''
        ,done: function(page, next){ //加载下一页
            renderMsg(page, function(data, pages){
                var html = laytpl( $('#show_tpl').html() ).render({
                    data: data
                    ,page: page
                });
                next(html, page < pages);
            });
        }
    });

    flow.load({
        elem: '#group_list' //流加载容器
        ,isAuto: false
        ,end: ''
        ,done: function(page, next){ //加载下一页
            renderGroup(page, function(data, pages){
                var html = laytpl( $('#group_tpl').html() ).render({
                    data: data
                    ,page: page
                });
                next(html, page < pages);
            });
        }
    });





});
</script>
</body>
</html>
